<template>

    <el-tabs type="border-card" v-model="type">
        <el-tab-pane label="1. Nfs" name="nfs" ref="nfs">

            <fieldset>
                <legend>centos 安装：</legend>
                <div>
                    yum install nfs-utils
                </div>
            </fieldset>

            <fieldset>
                <legend>ubuntu 安装：</legend>
                <div>
                    apt-get install nfs-kernel-server nfs-common
                </div>
            </fieldset>


            <pre class="code">
mkdir -p /data/nfs

cat &lt;&lt;EOF &gt; /etc/exports
/data/nfs *(rw)
EOF

 n
showmount -e localhost
</pre>

            <pre>
k3s 中使用 nfs创建pod不成功！
            </pre>
        </el-tab-pane>

        <el-tab-pane label="2. namespace" name="ns" ref="ns">
            <pre class="code">
apiVersion: v1
kind: Namespace
metadata:
  annotations:
    field.cattle.io/containerDefaultResourceLimit: '{"limitsCpu":"4000m","limitsMemory":"4096Mi","requestsCpu":"3000m","requestsMemory":"3000Mi"}'
  name: app
spec:
  finalizers:
  - kubernetes
            </pre>
        </el-tab-pane>

        <el-tab-pane label="3. Local-Path & K8s" name="k8s" ref="k8s">
            <selector type="check" :data="'pv,pvc,app'.split(',')" v-model="types"/>

            <fieldset v-if="types.includes('pv')" ref="pv">
                <legend>Pv</legend>
                <div class="main">
                    <kv label="名称">
                        <el-input v-model="name" chk="{value.length}(2)" placeholder="请输入名称">
                            <template slot="prepend">pv-</template>
                        </el-input>
                    </kv>
                    <kv label="空间大小">
                        <el-input v-model="pv.storage">
                            <template slot="append">GB</template>
                        </el-input>
                    </kv>
                    <kv label="local路径">
                        <el-input v-model="pv.path" chk="{value.length}(2)">
                            <template slot="append">/{{name}}</template>
                        </el-input>
                    </kv>
                </div>
            </fieldset>


            <fieldset v-if="types.includes('pvc')" ref="pvc">
                <legend>Pvc</legend>
                <div class="main ">
                    <kv label="名称">
                        <el-input v-model="name" chk="{value.length}(2)" placeholder="请输入pvc名称">
                            <template slot="prepend">pvc-</template>
                        </el-input>
                    </kv>
                    <kv label="名称空间">
                        <el-input v-model="namespace"/>
                    </kv>
                    <kv label="空间大小">
                        <el-input v-model="pvc.storage">
                            <template slot="append">GB</template>
                        </el-input>
                    </kv>
                </div>
            </fieldset>

            <fieldset v-if="types.includes('app')" ref="app">
                <legend>App</legend>
                <div class="main ">
                    <kv label="app名称">
                        <el-input v-model="name" chk="{value.length}(2)"
                                  placeholder="请输入app名称"/>
                    </kv>
                    <kv label="镜像名称">
                        <el-input v-model="app.image" chk="{value.length}(2)">
                        </el-input>
                    </kv>
                    <kv label="副本数量">
                        <el-input v-model="app.replicas"/>
                    </kv>
                    <kv label="名称空间">
                        <el-input v-model="namespace"/>
                    </kv>
                    <kv label="命令行">
                        <el-input v-model="app.command"/>
                    </kv>
                    <kv label="命令行: spring profile">
                        <el-input v-model="app.profile"/>
                    </kv>
                    <kv label="命令行分隔符">
                        <el-input v-model="app.command_split"/>
                    </kv>
                    <kv label="服务端口">
                        <el-input v-model="app.port"/>
                    </kv>
                    <kv label="Pod端口">
                        <el-input v-model="app.targetPort"/>
                    </kv>
                    <kv label="挂载路径">
                        <el-input v-model="app.mountPath"/>
                    </kv>
                </div>
            </fieldset>

            <button @click="ok_click()">生成 {{types.join('-')}}</button>
            <label>kubectl apply -f {{types.join('-')}}-{{name}}.yml</label>

            <pre v-html="result" class="code" ref="res"></pre>

        </el-tab-pane>

    </el-tabs>

</template>

<script type="text/ecmascript-6">
    export default {
        data: function () {
            return {
                type: "k8s",
                types: "pv,pvc,app".split(','),
                name: "",
                namespace: "app",
                pv: {
                    storage: "2",
                    path: "/data/nfs",
                    server: ""
                },
                pvc: {
                    storage: "1",
                },
                app: {
                    replicas: 1,
                    profile: "",
                    command: "",
                    command_split: " ",
                    port: 80,
                    targetPort: 80,
                    mountPath: "/data"
                },
                result: ""
            }
        },
        mounted() {
        },
        methods: {
            ok_click() {
                var list = [];
                var r = "";
                if (this.types.includes("pv")) {
                    r = this.pv_click();
                    if (r === false) {
                        return;
                    }
                }

                list.push(r);


                if (this.types.includes("pvc")) {
                    r = this.pvc_click();
                    if (r === false) {
                        return;
                    }
                }

                list.push(r);

                if (this.types.includes("app")) {
                    r = this.app_click();
                    if (r === false) {
                        return;
                    }
                }

                list.push(r);

                this.result = list.join("\n---\n");

                this.$nextTick(()=>{
                    jv.select(this.$refs.res);
                })
            },
            app_click() {
                if (this.$refs.app.chk() == false) return false;


                var template1 = `apiVersion: apps/v1
kind: Deployment
metadata:
  name: dep-{name}
  namespace: {namespace}
spec:
  replicas: {replicas}
  selector:
    matchLabels:
      name: dep-{name}
  template:
    metadata:
      labels:
        name: dep-{name}
    spec:
      containers:
      - name: {name}
        image: {image}
        volumeMounts:
        - mountPath: {mountPath}
          name: pvc-{name}
        resources:
          limits:
            cpu: 1
            memory: 512Mi
      volumes:
      - name: pvc-{name}
        persistentVolumeClaim:
          claimName: pvc-{name}

---
apiVersion: v1
kind: Service
metadata:
  name: svc-{name}
  namespace: {namespace}
spec:
  selector:
    name: dep-{name}
  type: NodePort
  ports:
  - protocol: TCP
    port: {port}
    targetPort: {targetPort}
    nodePort: {nodePort}
`

                var others = [];
                if (this.app.profile) {
                    others.push("--spring.profiles.active=" + this.app.profile)
                }
                if (this.app.command) {
                    this.app.command.split(this.app.command_split).map(it => it.trim()).filter(it => it).forEach(it => {
                        others.push(it);
                    })
                }

                return template1.format(Object.assign({}, this.app, {
                    other: others.map(it => "," + '"' + it + '"').join(""),
                    name: this.name,
                    nodePort: 30000 + (this.app.port % 30000),
                    namespace: this.namespace
                }));


            }
            , pv_click() {
                if (this.$refs.pv.chk() == false) return false;
                var pv = `apiVersion: v1
kind: PersistentVolume
metadata:
  name: pv-{name}
spec:
  capacity:
    storage: {storage}Gi
  accessModes:
    - ReadWriteOnce
  persistentVolumeReclaimPolicy: Retain
  storageClassName: local-path
  volumeMode: Filesystem
  hostPath:
    path: {path}/pv-{name}
    type: DirectoryOrCreate
`
                return pv.format(Object.assign({}, this.pv, {
                    name: this.name,
                    namespace: this.namespace
                }));
            }
            , pvc_click() {
                if (this.$refs.pvc.chk() == false) return false;
                var pvc = `apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: pvc-{name}
  namespace: {namespace}
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: {storage}Gi
  storageClassName: local-path
  volumeMode: Filesystem
  volumeName: pv-{name}
`;
                return pvc.format(Object.assign({}, this.pvc, {
                    name: this.name,
                    namespace: this.namespace
                }));
            }
        }
    }
</script>

<style scoped>
    >>> .kv {
        margin: 10px;
        display: flex;
    }

    >>> .kv .k {
        display: inline-block;
        text-align: right;
        min-width: 160px;
    }

    >>> .kv input {
        padding: 3px 5px;
        flex: 1;
    }

</style>
